<template>
    <div id='tmpl'>
        <div class="cate">
            <ul ref='ul'>
                <li @click='getimgslist()'>全部</li>
                <li v-for='item in cates' @click='getimgslist(item.id)'>
                    {{item.title}}
                </li>
            </ul>
        </div>
        <div class="imglist">
            <ul>
                <li v-for="item in imglist">
                    <router-link v-bind="{to:'/photo/photoinfo/'+item.id}">
                        <img v-lazy="item.img_url">
                    </router-link>
                    <div class="desc">
                        <h5>{{item.title}}</h5>
                        <p v-text='item.zhaiyao'></p>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
export default {
    name: "component_name",
    data() {
        return {
            cates: [],
            imglist: []
        };
    },
    methods: {
        getimgcates() {
            var url = this.$common.apidomain + '/api/getimgcategory';
            this.$http.get(url)
                .then(res => {
                    var data = res.body;
                    console.log(data);
                    if (data.status != 0) {
                        this.$toast(data.message);
                        return
                    }
                    this.cates = data.message;
                    var length = data.message.length + 1;
                    var width = 62;
                    var totalwidth = length * width;
                    this.$refs.ul.style.width = totalwidth + 'px';
                })
        },
        getimgslist(id) {
            var cateid = id || 0;
            var url = this.$common.apidomain + '/api/getimages/' + cateid;
            this.$http.get(url)
                .then(res => {
                    var data = res.body;
                    this.imglist = data.message;
                    console.log(data);
                })
        }
    },
    created() {
        this.getimgcates();
        this.getimgslist();
    }
}
</script>
<style lang="css" scoped>
.cate {
    width: 375px;
    max-width: 375px;
    overflow-x: auto;
}

.cate ul {
    margin: 0px;
    padding-left: 10px;
}

.cate li {
    cursor: pointer;
    list-style: none;
    display: inline-block;
    color: #0094ff;
    font-size: 14px;
    padding-left: 6px;
}
.imglist ul{
    list-style: none;
    padding-right: 40px;
} 
.imglist ul li{
    position: relative;
}
.imglist ul li .desc{
    position: absolute;
    bottom: 0;
    left: 0;
    
}
.desc h5,p{
    color:white;
}
img{
    width: 100%;
    height: 300px;
}
image[lazy=loading] {
    width: 40px;
    height: 300px;
    margin: auto;
}
</style>